<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="企业名称" prop="comName">
        <el-input
          v-model="queryParams.comName"
          placeholder="请输入企业名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="放款时间" prop="senTime">
        <el-date-picker clearable size="small"
          v-model="queryParams.senTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择放款时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="放款状态" prop="senStatus">
        <el-select v-model="queryParams.senStatus" placeholder="请选择" clearable size="small">
          <el-option
            v-for="dict in senStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 放款统计图表 -->
    <h3>放款统计</h3>
    <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
  </div>
</template>

<script>
import {
  listSend
} from "@/api/system/sendchart";

export default {
  name: "SendChart",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 放款表格数据
      sendList: [],
      // 放款状态字典选项
      senStatusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000, // 获取足够多的数据用于图表展示
        comName: null,
        senTime: null,
        senStatus: null
      },
      // 图表数据
      chartData: [],
      // 字典数据是否加载完成
      dictLoaded: false,
      // 数据是否加载完成
      dataLoaded: false,
      // 默认状态映射
      defaultStatusMap: {
        '0': '待审核',
        '1': '审核中',
        '2': '已放款',
        '3': '已拒绝',
        '4': '已取消'
      }
    };
  },
  created() {
    console.log("开始加载放款统计图表页面");
    this.loadDictData();
    this.getList();
  },
  mounted() {
    console.log("放款统计图表页面挂载完成");
    // 窗口大小改变时重置图表大小
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    console.log("放款统计图表页面即将销毁");
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    /** 加载字典数据 */
    loadDictData() {
      console.log("开始加载字典数据");
      // 尝试多种可能的字典类型
      const dictTypes = ["sys_send_status", "sys_bank_send_status", "bank_send_status"];
      
      // 尝试第一个字典类型
      this.tryLoadDict(dictTypes[0], 0, dictTypes);
    },
    
    /** 尝试加载字典数据 */
    tryLoadDict(dictType, index, dictTypes) {
      this.getDicts(dictType).then(response => {
        if (response.data && response.data.length > 0) {
          this.senStatusOptions = response.data;
          console.log("字典数据加载完成:", this.senStatusOptions);
          this.dictLoaded = true;
          // 如果数据已加载，则处理数据并绘制图表
          if (this.dataLoaded) {
            this.$nextTick(() => {
              this.processAndDrawChart();
            });
          }
        } else {
          // 如果当前字典类型没有数据，尝试下一个
          this.tryNextDict(index, dictTypes);
        }
      }).catch(error => {
        console.error(`字典数据加载失败 (${dictType}):`, error);
        // 如果当前字典类型加载失败，尝试下一个
        this.tryNextDict(index, dictTypes);
      });
    },
    
    /** 尝试下一个字典类型 */
    tryNextDict(index, dictTypes) {
      if (index + 1 < dictTypes.length) {
        console.log(`尝试下一个字典类型: ${dictTypes[index + 1]}`);
        this.tryLoadDict(dictTypes[index + 1], index + 1, dictTypes);
      } else {
        console.warn("所有字典类型都尝试过了，但都没有数据");
        this.$message.warning("未找到放款状态字典数据，将使用默认状态映射");
        this.dictLoaded = true;
        if (this.dataLoaded) {
          this.$nextTick(() => {
            this.processAndDrawChart();
          });
        }
      }
    },
    
    /** 查询放款列表 */
    getList() {
      console.log("开始加载放款列表数据");
      this.loading = true;
      listSend(this.queryParams).then(response => {
        console.log("放款API响应:", response);
        this.sendList = response.rows || [];
        console.log("放款数据加载完成:", this.sendList);
        this.dataLoaded = true;
        // 如果字典数据已加载，则处理数据并绘制图表
        if (this.dictLoaded) {
          this.$nextTick(() => {
            this.processAndDrawChart();
          });
        }
      }).catch(error => {
        console.error("放款数据加载失败:", error);
        this.$message.error("放款数据加载失败: " + (error.message || "未知错误"));
      }).finally(() => {
        this.loading = false;
      });
    },
    
    /** 处理并绘制图表 */
    processAndDrawChart() {
      console.log("开始处理并绘制图表");
      try {
        this.processData();
        this.$nextTick(() => {
          this.drawChart();
        });
      } catch (error) {
        console.error("处理或绘制图表时出错:", error);
        this.$message.error("处理或绘制图表时出错: " + error.message);
      }
    },
    
    /** 处理数据 */
    processData() {
      console.log('开始处理数据...');
      console.log('处理前的sendList:', this.sendList);
      console.log('字典选项:', this.senStatusOptions);
      
      // 统计各状态放款数量
      const statusCount = {};
      
      // 统计各状态数量
      this.sendList.forEach((item, index) => {
        // 打印每个项目的senStatus值用于调试
        console.log(`项目${index}状态值:`, item.senStatus, '类型:', typeof item.senStatus);
        
        // 获取状态标签
        let statusLabel = null;
        
        // 如果字典数据加载完成且不为空，尝试获取标签
        if (this.dictLoaded && this.senStatusOptions.length > 0) {
          statusLabel = this.getLabelByValue(item.senStatus);
        } 
        // 如果没有字典数据，使用默认映射
        else if (this.defaultStatusMap.hasOwnProperty(item.senStatus)) {
          statusLabel = this.defaultStatusMap[item.senStatus];
        }
        
        // 如果通过字典值找不到，尝试直接使用senStatus值
        if (!statusLabel && (item.senStatus === 0 || item.senStatus)) {
          statusLabel = String(item.senStatus);
        }
        
        console.log(`项目${index}状态标签:`, statusLabel);
        
        if (statusLabel) {
          statusCount[statusLabel] = (statusCount[statusLabel] || 0) + 1;
        } else {
          // 统计未识别的状态
          const unknownLabel = '未知状态';
          statusCount[unknownLabel] = (statusCount[unknownLabel] || 0) + 1;
        }
      });
      
      console.log('统计后的状态计数:', statusCount);
      
      // 转换为图表需要的格式
      this.chartData = Object.keys(statusCount).map(key => {
        return {
          name: key,
          value: statusCount[key]
        };
      });
      
      console.log('处理后的chartData:', this.chartData);
      console.log('数据处理完成，准备绘制图表');
    },
    
    /** 根据状态值获取标签 */
    getLabelByValue(value) {
      // 处理不同类型的值比较
      if (value === null || value === undefined) {
        return null;
      }
      
      const option = this.senStatusOptions.find(item => {
        return String(item.dictValue) === String(value);
      });
      return option ? option.dictLabel : null;
    },
    
    /** 绘制图表 */
    drawChart() {
      console.log("开始实际绘制图表");
      const chartDom = document.getElementById('myChart');
      if (!chartDom) {
        console.error('找不到图表DOM元素');
        this.$message.error('找不到图表DOM元素');
        return;
      }
      
      // 清空图表容器
      chartDom.innerHTML = '';
      
      if (!this.chartData || this.chartData.length === 0) {
        console.warn('图表数据为空');
        // 显示提示文字
        chartDom.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #999;">暂无数据</div>';
        return;
      }
      
      const myChart = this.$echarts.init(chartDom);
      
      // 图表配置
      const option = {
        title: {
          text: '放款状态统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '放款状态',
            type: 'pie',
            radius: '50%',
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      
      // 设置图表配置
      myChart.setOption(option, true);
      
      console.log('图表绘制完成');
    },
    
    // 窗口大小改变处理函数
    handleResize() {
      console.log("窗口大小改变");
      // 注意：这里需要重新获取图表实例，因为Vue组件可能已经重新渲染
      const chartDom = document.getElementById('myChart');
      if (chartDom) {
        const myChart = this.$echarts.getInstanceByDom(chartDom);
        if (myChart) {
          myChart.resize();
        }
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

<style scoped>
.app-container {
  background: #fff;
  padding: 20px;
}
</style>